<template>
    <view>
        <custom><template #backText>{{is_select==0&&is_location==0?'收货地址':'选择地址'}}</template></custom>
        <view v-if="is_location == 1">
            <view @tap="tapReLocation" class="flex justify-between align-center bg-white padding-lr-20 padding-tb-30 margin-bottom-20">
                <view class="flex align-center">
                    <view class="text-nddyny text-xxl">
                        <text class="cuIcon-location"></text>
                    </view>
                    <view class="margin-left-10">
                        <view class="text-lg text-bold">
                            {{address_name?address_name:'定位失败，请打开定位后点击重试'}}
                        </view>
                        <view v-if="!address_name" class="text-gray margin-top-4 text-13">
                            或者选择一个收货地址，当做定位地址
                        </view>
                    </view>
                </view>
                <view class="text-nddyny flex-s0">
                    重新定位
                </view>
            </view>
        </view>
        <view class="margin-bottom-20" v-if="is_location == 1">
            <addressKeyword title="手动定位" title_em="2" placeholder="请输入详细地址" :data.sync="keyword_data" field="keyword"
                :location="location" :callback="tapContent"></addressKeyword>
        </view>
        <list v-if="$store.state.user.auth_token" :list="data.list" empty_list_title="还没有收货地址">
            <template #list>
                <view class="cu-list menu">
                    <nMenuItemRow2 v-for="(info, key) in data.list" :key="key" :tap="()=>{back_force_init = true}" :uri='"/user/address/edit?address_id=" + info.address_id'
                        :tapContent="is_select?()=>{tapContent(info)}:null" :bottom_title="info.province_city_area_name + ' ' + info.address_remark"
                        right_icon="cuIcon-edit">
                        <template #top_title>
                            <view class="flex align-center">
                                <view v-if="info.is_default == 1" class='cu-tag radius bg-nddyny margin-right-10'>
                                    默认
                                </view>
                                <view v-if="info.tag == 1 || info.tag == 2" class='cu-tag radius bg-nddyny light margin-right-10'>
                                    {{info.tag == 1 ? '家' : (info.tag == 2 ? '公司' : '')}}
                                </view>
                                <view>
                                    {{info.name}}{{info.sex==0?'(先生)':(info.sex==1?'(女士)':'')}}
                                </view>
                                <text class="margin-left-10 text-gray text-df">{{info.phone}}</text>
                            </view>
                        </template>
                    </nMenuItemRow2>
                </view>
            </template>
        </list>
        <foot v-if="$store.state.user.auth_token" :tap="()=>{back_force_init = true}" uri="/user/address/edit" title="添加新地址">
        </foot>
    </view>
</template>

<script>
    import addressKeyword from '../../../components/nddyny/form/addressKeyword.vue';
    export default {
        components: {
            addressKeyword,
        },
        data() {
            return {
                is_select: 0, // 当前页面是不是用来选择收货地址的
                is_location: 0, // 当前页面是不是用来定位的
                address_name: '', // 定位位置信息
                location: '',
                back_force_init: false,
                data: {
                    offset: 0,
                    limit: 15,
                    stop: false,
                    list: [],
                },
                keyword_data: {
                    form: {
                        keyword: ''
                    }
                }
            }
        },
        onLoad(params) {
            this.is_select = params.is_select || 0;
            this.is_location = params.is_location || 0;
            this.address_name = params.address_name || '';
            this.location = params.location || '';
            this.getList(this.$api.list_action_init);
        },
        onReachBottom() {
            this.getList(this.$api.list_action_add);
        },
        onShow() {
            if (!this.back_force_init) return;
            this.back_force_init = false;
            this.getList(this.$api.list_action_force_init);
        },
        methods: {
            tapReLocation() {
                this.$store.commit('appBackPage', {
                    re_location: true
                });
            },
            tapContent(info) {
                this.$store.commit('appBackPage', info);
            },
            getList(action) {
                if (!this.$store.state.user.auth_token) {
                    return;
                }
                this.$api.list(this, {
                    action,
                    url: '/user/address/list',
                    success: (Result) => {
                        if (this.$api.form.toast(this, Result)) return;
                        this.data.list = this.data.list.concat(Result.result.list);
                    }
                });
            },
        },
    }
</script>
